<template>
  <div id="app">
    <h1>Vue中过滤器(filters)的使用</h1>
    <table border="1">
      <tr v-for="(item, index) in orderData" :key="index">
        <td>{{ item.orderId }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td :class="item.status | setOrderStatus | setStatusStyle">
          {{ item.status | setOrderStatus }}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import orderData from './data/order';
import orderFilter from './filters/order';

export default {
  filters: orderFilter,
  data() {
    return {
      orderData,
    };
  },
};
</script>

<style>
#app {
  text-align: center;
}

table {
  width: 800px;
  margin: 50px auto;
  border-collapse: collapse;
  text-align: center;
}

.not-pay {
  color: red;
}

.not-send {
  color: blue;
}

.not-receive {
  color: orange;
}

.not-comment {
  color: green;
}
</style>
